<template>
	<view class="nas-uploadFile">
		<view class="nas-uploadFile-body">
			<view class="upload-item" @click="goPhoto">
				<image src="../../../../static/nas-static/nas-upPaizhao.svg" mode=""></image>
				<view>拍照上传</view>
			</view>
			<view class="upload-item" @click="uploadFiles('photos')">
				<image style="margin-left: 30rpx;" src="../../../../static/nas-static/nas-upImg.svg" mode=""></image>
				<view>上传图片</view>
			</view>
			<view class="upload-item" @click="uploadFiles('moives')">
				<image src="../../../../static/nas-static/nas-upVideo.svg" mode=""></image>
				<view>上传视频</view>
			</view>
			<view class="upload-item" @click="uploadFiles('music')">
				<image src="../../../../static/nas-static/nas-upMusic.svg" mode=""></image>
				<view>上传音频</view>
			</view>
			<view class="upload-item" @click="uploadFiles('document')">
				<image src="../../../../static/nas-static/nas-upFile.svg" mode=""></image>
				<view>上传文档</view>
			</view>
			<view class="upload-item" @click="uploadFiles('create')">
				<image src="../../../../static/nas-static/nas-upCreate.svg" mode=""></image>
				<view>新建文件夹</view>
			</view>
		</view>
		<view class="nas-bottom-close" @click="close">X</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		// 关闭页面
		close() {
			this.$emit('close');
		},

		/**
		 * @param {Object} type 文件的类型
		 */
		async uploadFiles(type) {
			if (type === 'create') {
				this.$emit('create');
				return;
			}
			let uploadType = '';
			switch (type) {
				case 'moives':
					uploadType = 'checkMoives';
					break;
				case 'music':
					uploadType = 'checkMusic';
					break;
				case 'photos':
					uploadType = 'checkPhotos';
					break;
				case 'document':
					uploadType = 'checkDocument';
					break;
				default:
					break;
			}
			
			// 引入原生插件进行上传
			const CheckMobileContent = uni.requireNativePlugin('CheckMobileContent');
			try {
				CheckMobileContent[uploadType](
					{
						fileNum: 6 //限制的数量，不能超过这个数量
					},
					res => {
						if (res.data === '点击了取消') {
							// 直接关闭页面
							this.close();
						} else {
							// 缓存选中的文件临时地址等信息
							uni.setStorageSync('nasUploading', res.data);
							// 跳转到选择保存文件夹的页面
							this.$emit('saveFile');
						}
					}
				);
			} catch (e) {
				// 上传失败
				uni.showToast({
					title: '上传失败 ' + e + CheckMobileContent,
					icon: 'none'
				});
			}
		},
		goPhoto() {
			uni.chooseImage({
			  	count: 1,
			    sizeType: ['original', 'compressed'],
			    sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
			    success: (res)=> {
					const tempFiles = res.tempFiles;
					// console.log(tempFiles, '拍照的回调');
					// 缓存选中的文件临时地址等信息
					uni.setStorageSync('nasUploading', JSON.stringify(tempFiles));
					// 跳转到选择保存文件夹的页面
					this.$emit('saveFile');
			    }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nas-uploadFile {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: #fff;
	.nas-uploadFile-body {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		height: 480rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.upload-item {
			width: 200rpx;
			height: 200rpx;
			text-align: center;
			font-family: HarmonyOS_Sans_SC;
			font-size: 30rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
			image {
				width: 90rpx;
				height: 70rpx;
			}
		}
	}
	.nas-bottom-close {
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		font-size: 50rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
	}
}
</style>
